<template>
  <!-- 可拖拽区域 -->
  <movable-area class="suspension-button-container" v-if="init">
    <!-- 发布入口按钮 -->
    <movable-view class="movable-view" direction="all" :y="y" :x="x">
      <view class="publish-button" @click="handleJumpPublish">
        <uni-icons color='#fff' custom-prefix="iconfont" type="icon-sending" :size="iconSize">
        </uni-icons>
      </view>
    </movable-view>
    <!-- 返回顶部按钮 -->
    <movable-view class="movable-view" direction="all" disabled :y="y - size - 32" :x="x" v-if="isBackUp">
      <view class="backup-button" @click="handleBackUp">
        <uni-icons color='#595656' custom-prefix="iconfont" type="icon-top" :size="iconSize">
        </uni-icons>
      </view>
    </movable-view>
  </movable-area>
</template>

<script>
  // TODO 根据设计题 设定 坐标位置用户体验不友好  位置不小心会触发安卓返回
  import CertifiedMixin from "@/plugins/certified.js"
  export default {
    mixins: [CertifiedMixin],
    name: "suspension-button",
    props: {
      // 是否显示返回顶部
      isBackUp: {
        default: false,
        type: Boolean
      },
      NotCertifiedText: {
        default: "",
        type: String
      }
    },
    data() {
      return {
        // 初始坐标
        x: 0,
        y: 0,
        init: false,
        // iconSize: 20,
        iconSize: 24,
        // size: 32
        size: 64,
        loading: false
      };
    },
    mounted() {

      const windowWidth = uni.getSystemInfoSync().windowWidth;
      const windowHeight = uni.getSystemInfoSync().windowHeight;
      // 可移动元素默认坐标 减去自身宽度 减去设计图中的边距
      let left = windowWidth - this.size - 8;
      this.x = left;
      const top = windowHeight - this.size - 16;
      this.y = top;
      // 避免出现 可拖拽视图 移动效果
      this.init = true;
    },
    methods: {
      async handleJumpPublish() {
        this.handleCertified(() => {
          this.$emit('publish')
        }, this.NotCertifiedText)
      },
      handleBackUp() {
        this.$emit('backup')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .suspension-button-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    //none 不会作用点击 触控事件
    pointer-events: none;
    z-index: 999;
    --size: 96rpx;
    --size: 96rpx;

    .movable-view {
      // 表示元素可点击
      pointer-events: auto;
      width: var(--size);
      height: var(--size);

      .publish-button {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-image: linear-gradient(45deg, #3FD3D1, #03f4f4);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05), 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
      }

      .backup-button {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05), 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
      }
    }
  }
</style>